<template>
	<view>
		<view class="gui-flex gui-space-around gui-border-t gui-bg-white gui-border-radius-large gui-box-shadow gui-margin-top"
			style="width: 90%;padding: 20rpx 0rpx;margin-left: 5%;z-index: 9999;">
			<view v-for="(item,index) in menus" style="display: flex; justify-content: space-around;"
				@tap="navChange(item,index)" >
				<view style="text-align: center; " class="menu" :class=" menu_index == index?'menu_action':'' "> 
					<!-- <view style="text-align: center; margin: 0 50rpx;"> -->
					<image :src="item.img" style="height: 58rpx; width: 58rpx; "></image>
					<!-- gui-footer-icon-buttons-text -->
					<text>
						{{item.label}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import payJs from '@/Grace6/js/pay.js';
	export default {
		props:{
			menu_index: 0
		},
		data() {
			return {
				currentIndex: 0,
				menus: [{
						label: '工会费',
						value: 'ghf',
						img: '../../static/img/gonghui.png',
						url:"./ghf"
					},
					{
						label: '互助金',
						img: '../../static/img/care.png',
						value: 'hzj',
						url:"./hzj"
					},
					{						
						label: '团费',
						img: '../../static/img/people.png',
						value: 'tw',
						url:'./tw'
					},	
					
					{					
						label: '缴费记录',
						value: 'record',
						img: '../../static/img/CG.png',
						url:"./record"
					},
					{
						label: '联系客服',
						value: 'service',
						img: '../../static/img/servce.png',
						url:"./service"
					},
				],				
				menu: 'ghf',
			}
		},
		methods: {
			navChange(item, index) {
				var self = this
				console.log('item: ', item, index);
				
				// #ifdef H5
				// uni.webView.postMessage({
				// 	data: {
				// 		type: "title",
				// 		data: {
				// 			"title":item.label
				// 		}
				// 	},
				// })
				// return;
				// #endif
				
				if(item.value=="service"){
					let res={
						type: "open_wexin",
						data: {
							app_id: "gh_edf4ceb10043",
							path: "pages/service/service",
						},
					}
					payJs.open_wx(res);
					return;
				}
				uni.redirectTo({
					url:item.url
				})
			}
		}
	}
</script>

<style>
.menu{
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	gap: 10rpx;
	text{
		color: #666666;
		font-size: 26rpx;
	}
}
.menu_action{
	border-bottom: solid 2rpx #2742bf;
	box-shadow: #efefef 5rpx 5rpx 5rpx #999999;
	text{
		color: #2742bf;
		font-size: 30rpx;
		font-weight: bold;
	}
	
}
</style>
